<template>

    <div class="privacy-container">
    <div class="content-box">
      <h1>隐私政策</h1>
      <div class="content">
        <section>
          <h2>最新更新：2023年11月1日</h2>
          <p class="emphasis">欢迎使用养老服务整合平台！我们深知个人信息的重要性，特此制定本隐私政策帮助您了解：</p>
          <ul>
            <li>• 我们会收集哪些信息及其用途</li>
            <li>• 我们如何保护您的信息</li>
            <li>• 您享有的数据权利</li>
          </ul>
        </section>

        <section>
          <h2>一、信息收集范围</h2>
          <h3>1.1 您提供的信息</h3>
          <ul>
            <li>• 身份信息：姓名、身份证号、年龄</li>
            <li>• 联系信息：手机号、电子邮箱、紧急联系人</li>
            <li>• 健康数据：病历记录、用药信息、护理需求</li>
          </ul>

          <h3>1.2 自动收集的信息</h3>
          <ul>
            <li>• 设备信息：IP地址、浏览器类型、操作系统版本</li>
            <li>• 使用数据：服务访问时间、页面浏览记录、点击热图</li>
            <li>• 位置信息：精确位置（需单独授权）</li>
          </ul>
        </section>

        <section>
          <h2>二、信息使用方式</h2>
          <p>我们仅在以下情形使用您的个人信息：</p>
          <ul>
            <li>• 执行养老服务机构匹配（根据健康评估结果）</li>
            <li>• 提供定制化护理方案建议</li>
            <li>• 发送重要服务通知（如预约变更提醒）</li>
            <li>• 改进服务质量（通过匿名化数据分析）</li>
          </ul>
        </section>

        <section>
          <h2>三、数据共享政策</h2>
          <h3>3.1 严格保密原则</h3>
          <p>未经您明确同意，我们不会将您的健康信息共享给第三方，以下情形除外：</p>
          <ul>
            <li>• 配合司法机关调查（需出示有效法律文件）</li>
            <li>• 突发公共卫生事件应急处理</li>
            <li>• 专业医疗团队进行生命救助时</li>
          </ul>

          <h3>3.2 合作机构共享</h3>
          <p>在您选择具体服务时，我们会与以下类型机构共享必要信息：</p>
          <div class="warning">
            <ul>
              <li>• 签约养老服务机构（仅共享护理需求评估）</li>
              <li>• 合作医疗机构（共享用药及过敏史）</li>
            </ul>
          </div>
        </section>

        <section>
          <h2>四、您的数据权利</h2>
          <ul class="rights-list">
            <li>
              <span class="right-title">访问权：</span>
              随时通过【个人中心-数据看板】查阅您的信息副本
            </li>
            <li>
              <span class="right-title">更正权：</span>
              发现信息有误时，可通过邮箱提交修改申请（7个工作日内处理）
            </li>
            <li>
              <span class="right-title">删除权：</span>
              注销账户后，我们将依据《网络安全法》第43条删除数据
            </li>
          </ul>
        </section>


        <section class="contact-section">
          <h2>联系我们</h2>
          <p>如有隐私相关问题，请通过以下方式联系数据保护官：</p>
          <div class="contact-info">
            <p>📧 邮箱：2065501873@qq.com</p>
            <p>📞 专线：400-123-4567（工作日9:00-18:00）</p>
            <p>✉️ 信函：佳都先锋工作室</p>
          </div>
        </section>
      </div>
      <el-button type="primary" @click="goBack" class="back-btn">返回注册</el-button>
    </div>
  </div>

</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.privacy-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  padding: 2rem;
  background: #f5f7fa;
}

.content-box {
  width: 100%;
  max-width: 1200px;  /* 最大内容宽度 */
  margin: auto;       /* 水平居中关键 */
  background: white;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
  padding: 3rem;

  /* 动态效果 */
  transition: transform 0.3s ease;
}

/* 悬停动效 */
.content-box:hover {
  transform: translateY(-0.5rem);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .privacy-container {
    padding: 1rem;
  }

  .content-box {
    padding: 2rem;
    border-radius: 0.75rem;
  }

  h1 {
    font-size: 1.75rem;
  }
}

h1 {
  text-align: center;
  margin-bottom: 32px;
  color: #303133;
  font-size: 28px;
  font-weight: 600;
}

h2 {
  color: #67C23A;
  margin: 24px 0 16px;
  font-size: 20px;
  border-left: 4px solid #67C23A;
  padding-left: 12px;
}

h3 {
  color: #606266;
  margin: 18px 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.content {
  line-height: 1.8;
  color: #606266;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 20px;
}

/* 隐私政策特有样式 */
.warning {
  background: #fef0f0;
  border: 1px solid #fde2e2;
  border-radius: 8px;
  padding: 16px 24px;
  margin: 12px 0;
}

.rights-list li {
  margin-bottom: 15px;
  padding: 12px;
  background: #f8f8f8;
  border-radius: 6px;
}

.right-title {
  color: #67C23A;
  font-weight: 500;
}

.contact-info {
  background: #f0f9eb;
  padding: 20px;
  border-radius: 8px;
  margin-top: 15px;
}

.contact-info p {
  margin: 10px 0;
  padding-left: 28px;
  position: relative;
}

.contact-info p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
}

.emphasis {
  color: #E6A23C;
  font-weight: 500;
  border-left: 3px solid #E6A23C;
  padding-left: 12px;
}

@media (max-width: 768px) {
  .content-box {
    padding: 24px;
    margin: 10px;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 18px;
  }

  .contact-info p {
    padding-left: 24px;
  }
}

.back-btn {
  margin-top: 40px;
  width: 160px;
  height: 44px;
  font-size: 16px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease;
}
.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}
/* 滚动条样式统一 */
.content::-webkit-scrollbar {
  width: 6px;
}

.content::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.content::-webkit-scrollbar-track {
  background: #f5f7fa;
}
</style>